<template>
  <div class="walletDialog">
    <v-dialog v-model="isOpen" width="600">
      <v-card class="walletDialog-wrapper d-flex align-center justify-center">
        <div class="wallet-wrapper">
          <v-img class="img-logo" src="../../assets/images/svg/metamask-fox.svg"></v-img>
          <p class="text-h5 font-weight-bold mb-2">
            MetaMask
          </p>
          <p class="text-caption grey--text">
            {{ $t('Page.Wallet.Tip') }}
          </p>
          <v-btn x-large color="primary" class="mt-6" @click="connectWallet('metamask')">
            {{ $t('Page.Wallet.Btn') }}
          </v-btn>
        </div>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { connectWallet } from '@/utils/wallet'

export default {
  data () {
    return {
      isOpen: false,
      offlineSigner: '',
      wasmClient: '',
      accounts: '',
    }
  },
  methods: {
    open () {
      this.isOpen = true
      this.wallet = 'metamask'
    },
    async connectWallet (name) {
      if (name === 'metamask') {
        await connectWallet(this).catch(err => {
          this.$q.error(err.message || err)
        })
        this.isOpen = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.walletDialog-wrapper {
  height: 320px;
  padding: 20px;

  .wallet-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  h2 {
    margin-bottom: 5px;
  }

  .line {
    margin: 10px 0 20px;
  }

  .img-logo {
    max-width: 80px;
    max-height: 80px;
    margin-bottom: 12px;
  }
}
</style>
